

<template>
  <div class="app-container">
    <!-- 广播消息发送卡片 -->
    <el-card class="broadcast-card">
      <div slot="header" class="card-header">
        <span class="card-title">广播功能仅支持发送</span>
      </div>
      
      <el-form :model="broadcastForm" ref="broadcastForm" :rules="broadcastRules" label-width="0px">
        <!-- 消息内容输入框 -->
        <el-form-item prop="content">
          <el-input
            v-model="broadcastForm.content"
            type="textarea"
            placeholder="请输入内容"
            :rows="8"
            maxlength="1000"
            show-word-limit
            class="message-input"
          ></el-input>
        </el-form-item>

        <!-- 发送按钮 -->
        <el-form-item class="send-button-container">
          <el-button 
            type="primary" 
            @click="sendBroadcast" 
            :loading="sending"
            class="send-button"
          >
            发送
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 发送历史记录 -->
    <el-card class="history-card" v-if="showHistory">
      <div slot="header" class="card-header">
        <span class="card-title">发送历史</span>
        <el-button 
          type="text" 
          @click="refreshHistory" 
          class="refresh-btn"
        >
          刷新
        </el-button>
      </div>

      <el-table v-loading="loading" :data="historyList" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="content" label="消息内容" min-width="300" show-overflow-tooltip></el-table-column>
        <el-table-column prop="sendTime" label="发送时间" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.sendTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'success' ? 'success' : 'danger'">
              {{ scope.row.status === 'success' ? '成功' : '失败' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="historyTotal > 0"
        :total="historyTotal"
        :page.sync="historyQuery.pageNum"
        :limit.sync="historyQuery.pageSize"
        @pagination="getHistory"
      />
    </el-card>
  </div>
</template>

<script>
import {broadcastMessage, broadcastMessageList } from "@/api/zl/messages"

export default {
  name: "BroadcastMessages",
  data() {
    return {
      // 广播表单
      broadcastForm: {
        content: ''
      },
      // 表单验证规则
      broadcastRules: {
        content: [
          { required: true, message: "请输入消息内容", trigger: "blur" },
          { min: 1, max: 1000, message: "消息内容长度在 1 到 1000 个字符", trigger: "blur" }
        ]
      },
      // 发送状态
      sending: false,
      // 是否显示历史记录 - 修改为默认显示
      showHistory: true,
      // 历史记录相关
      loading: false,
      historyList: [],
      historyTotal: 0,
      historyQuery: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  created() {
    // 页面加载时自动获取历史记录
    this.getHistory()
  },
  methods: {
    // 发送广播消息
    async sendBroadcast() {
      this.$refs['broadcastForm'].validate(async (valid) => {
        if (valid) {
          this.sending = true
          try {
            // 直接发送文本内容到广播接口
            await broadcastMessage(this.broadcastForm.content)
            this.$modal.msgSuccess('广播消息发送成功')
            this.resetForm()
            
            // 发送成功后刷新历史记录
            this.getHistory()
          } catch (error) {
            this.$modal.msgError('广播消息发送失败')
          } finally {
            this.sending = false
          }
        }
      })
    },
    
    // 重置表单
    resetForm() {
      this.$refs['broadcastForm'].resetFields()
      this.broadcastForm.content = ''
    },
    
    // 获取发送历史 - 使用 broadcastMessageList 接口
    async getHistory() {
      this.loading = true
      try {
        const response = await broadcastMessageList(this.historyQuery)
        this.historyList = response.rows.map(item => ({
          id: item.id,
          content: item.content,
          sendTime: item.createdAt,
          status: item.status === 1 ? 'success' : 'failed'
        }))
        this.historyTotal = this.total = parseInt(response.total) || 0
      } catch (error) {
        this.$modal.msgError('加载历史记录失败')
      } finally {
        this.loading = false
      }
    },
    
    // 刷新历史记录
    refreshHistory() {
      this.historyQuery.pageNum = 1
      this.getHistory()
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  min-height: calc(100vh - 84px); /* 减去顶部导航栏高度 */
  width: 100%;
}

.broadcast-card {
  width: 100%;
  margin: 0 0 20px 0;
}

.history-card {
  width: 100%;
  margin: 0;
  flex: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.refresh-btn {
  padding: 3px 0;
}

.message-input {
  margin-bottom: 20px;
}

.send-button-container {
  text-align: center;
  margin-bottom: 0;
}

.send-button {
  width: 120px;
  height: 40px;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .broadcast-card,
  .history-card {
    margin: 0 0 20px 0;
  }
  
  .app-container {
    padding: 10px;
  }
}
</style>
